<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的简历 - 突袭简历</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/my-resumes.css">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <a href="index.html">
                    <span class="logo-text">突袭简历</span>
                </a>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="templates.html">简历模板</a></li>
                    <li><a href="resume-editor.html">简历编辑</a></li>
                    <li><a href="resume-analysis.html">AI分析</a></li>
                    <li><a href="pricing.html">会员服务</a></li>
                </ul>
            </nav>
            <div class="user-actions">
                <div class="user-dropdown">
                    <button class="user-dropdown-toggle">
                        <span class="user-avatar">👤</span>
                        <span class="user-name">张三</span>
                        <span class="dropdown-icon">▼</span>
                    </button>
                    <div class="user-dropdown-menu">
                        <a href="dashboard.html">个人中心</a>
                        <a href="my-resumes.html" class="active">我的简历</a>
                        <a href="account-settings.html">账号设置</a>
                        <a href="#" class="logout-link">退出登录</a>
                    </div>
                </div>
            </div>
            <button class="mobile-menu-toggle">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </header>

    <div class="dashboard-container">
        <aside class="dashboard-sidebar">
            <div class="user-info">
                <span class="user-avatar">👤</span>
                <div class="user-details">
                    <h3 class="user-name">张三</h3>
                    <div class="user-membership">
                        <span class="badge badge-premium">高级会员</span>
                        <span class="membership-expires">剩余 328 天</span>
                    </div>
                </div>
            </div>
            <nav class="dashboard-nav">
                <a href="dashboard.html" class="nav-item">
                    <span>🏠</span>
                    <span>个人中心</span>
                </a>
                <a href="my-resumes.html" class="nav-item active">
                    <span>📄</span>
                    <span>我的简历</span>
                </a>
                <a href="job-applications.html" class="nav-item">
                    <span>📋</span>
                    <span>求职申请</span>
                </a>
                <a href="saved-jobs.html" class="nav-item">
                    <span>🔖</span>
                    <span>收藏职位</span>
                </a>
                <a href="account-settings.html" class="nav-item">
                    <span>⚙️</span>
                    <span>账号设置</span>
                </a>
                <a href="membership.html" class="nav-item">
                    <span>👑</span>
                    <span>会员服务</span>
                </a>
            </nav>
            <div class="sidebar-footer">
                <a href="help-center.html" class="nav-item">
                    <span>❓</span>
                    <span>帮助中心</span>
                </a>
                <a href="#" class="nav-item logout-link">
                    <span>🚪</span>
                    <span>退出登录</span>
                </a>
            </div>
        </aside>

        <main class="dashboard-content">
            <div class="content-header">
                <h1>我的简历</h1>
                <div class="header-actions">
                    <div class="search-box">
                        <input type="text" placeholder="搜索简历...">
                        <button class="search-btn">
                            <span>🔍</span>
                        </button>
                    </div>
                    <button class="btn btn-primary" id="create-resume-btn">
                        <span>➕</span>
                        <span>创建简历</span>
                    </button>
                </div>
            </div>

            <div class="content-filters">
                <div class="filter-group">
                    <label>排序方式：</label>
                    <div class="select-wrapper">
                        <select class="form-select">
                            <option value="updated">最近更新</option>
                            <option value="created">创建时间</option>
                            <option value="name-asc">名称 (A-Z)</option>
                            <option value="name-desc">名称 (Z-A)</option>
                        </select>
                    </div>
                </div>
                <div class="filter-group">
                    <label>筛选：</label>
                    <div class="filter-buttons">
                        <button class="filter-btn active">全部</button>
                        <button class="filter-btn">已完成</button>
                        <button class="filter-btn">草稿</button>
                    </div>
                </div>
            </div>

            <div class="resumes-grid">
                <div class="resume-card">
                    <div class="resume-preview">
                        <div class="resume-preview-placeholder">📄 简历预览</div>
                        <div class="resume-actions">
                            <button class="action-btn" title="编辑">
                                <span>✏️</span>
                            </button>
                            <button class="action-btn" title="复制">
                                <span>📋</span>
                            </button>
                            <button class="action-btn" title="下载">
                                <span>📥</span>
                            </button>
                            <button class="action-btn" title="删除">
                                <span>🗑️</span>
                            </button>
                        </div>
                    </div>
                    <div class="resume-info">
                        <h3 class="resume-title">产品经理简历</h3>
                        <div class="resume-meta">
                            <span class="resume-date">更新于 2025-06-15</span>
                            <span class="resume-status complete">已完成</span>
                        </div>
                        <div class="resume-stats">
                            <div class="stat-item">
                                <span>👁️</span>
                                <span>32 次浏览</span>
                            </div>
                            <div class="stat-item">
                                <span>📥</span>
                                <span>8 次下载</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="resume-card">
                    <div class="resume-preview">
                        <div class="resume-preview-placeholder">📄 简历预览</div>
                        <div class="resume-actions">
                            <button class="action-btn" title="编辑">
                                <span>✏️</span>
                            </button>
                            <button class="action-btn" title="复制">
                                <span>📋</span>
                            </button>
                            <button class="action-btn" title="下载">
                                <span>📥</span>
                            </button>
                            <button class="action-btn" title="删除">
                                <span>🗑️</span>
                            </button>
                        </div>
                    </div>
                    <div class="resume-info">
                        <h3 class="resume-title">前端开发工程师简历</h3>
                        <div class="resume-meta">
                            <span class="resume-date">更新于 2025-05-28</span>
                            <span class="resume-status complete">已完成</span>
                        </div>
                        <div class="resume-stats">
                            <div class="stat-item">
                                <span>👁️</span>
                                <span>45 次浏览</span>
                            </div>
                            <div class="stat-item">
                                <span>📥</span>
                                <span>12 次下载</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="resume-card">
                    <div class="resume-preview">
                        <div class="resume-preview-placeholder">📄 简历预览</div>
                        <div class="resume-actions">
                            <button class="action-btn" title="编辑">
                                <span>✏️</span>
                            </button>
                            <button class="action-btn" title="复制">
                                <span>📋</span>
                            </button>
                            <button class="action-btn" title="下载">
                                <span>📥</span>
                            </button>
                            <button class="action-btn" title="删除">
                                <span>🗑️</span>
                            </button>
                        </div>
                    </div>
                    <div class="resume-info">
                        <h3 class="resume-title">市场营销专员简历</h3>
                        <div class="resume-meta">
                            <span class="resume-date">更新于 2025-05-10</span>
                            <span class="resume-status draft">草稿</span>
                        </div>
                        <div class="resume-stats">
                            <div class="stat-item">
                                <img src="images/icon-eye.svg" alt="浏览">
                                <span>8 次浏览</span>
                            </div>
                            <div class="stat-item">
                                <img src="images/icon-download-small.svg" alt="下载">
                                <span>0 次下载</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="resume-card">
                    <div class="resume-preview">
                        <div class="resume-preview-placeholder">📄 简历预览</div>
                        <div class="resume-actions">
                            <button class="action-btn" title="编辑">
                                <span>✏️</span>
                        </button>
                        <button class="action-btn" title="复制">
                            <span>📋</span>
                        </button>
                        <button class="action-btn" title="下载">
                            <span>📥</span>
                        </button>
                        <button class="action-btn" title="删除">
                            <span>🗑️</span>
                            </button>
                        </div>
                    </div>
                    <div class="resume-info">
                        <h3 class="resume-title">数据分析师简历</h3>
                        <div class="resume-meta">
                            <span class="resume-date">更新于 2025-04-22</span>
                            <span class="resume-status complete">已完成</span>
                        </div>
                        <div class="resume-stats">
                            <div class="stat-item">
                                <img src="images/icon-eye.svg" alt="浏览">
                                <span>27 次浏览</span>
                            </div>
                            <div class="stat-item">
                                <img src="images/icon-download-small.svg" alt="下载">
                                <span>5 次下载</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="resume-card">
                    <div class="resume-preview">
                        <div class="resume-preview-placeholder">📄 简历预览</div>
                        <div class="resume-actions">
                            <button class="action-btn" title="编辑">
                                <img src="images/icon-edit.svg" alt="编辑">
                            </button>
                            <button class="action-btn" title="复制">
                                <img src="images/icon-duplicate.svg" alt="复制">
                            </button>
                            <button class="action-btn" title="下载">
                                <img src="images/icon-download.svg" alt="下载">
                            </button>
                            <button class="action-btn" title="删除">
                                <img src="images/icon-trash.svg" alt="删除">
                            </button>
                        </div>
                    </div>
                    <div class="resume-info">
                        <h3 class="resume-title">UI/UX设计师简历</h3>
                        <div class="resume-meta">
                            <span class="resume-date">更新于 2025-04-05</span>
                            <span class="resume-status draft">草稿</span>
                        </div>
                        <div class="resume-stats">
                            <div class="stat-item">
                                <span>👁️</span>
                            <span>45 次浏览</span>
                        </div>
                        <div class="stat-item">
                            <span>📥</span>
                            <span>12 次下载</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="resume-card">
                    <div class="resume-preview">
                        <div class="resume-preview-placeholder">📄 简历预览</div>
                        <div class="resume-actions">
                            <button class="action-btn" title="编辑">
                                <img src="images/icon-edit.svg" alt="编辑">
                            </button>
                            <button class="action-btn" title="复制">
                                <img src="images/icon-duplicate.svg" alt="复制">
                            </button>
                            <button class="action-btn" title="下载">
                                <img src="images/icon-download.svg" alt="下载">
                            </button>
                            <button class="action-btn" title="删除">
                                <img src="images/icon-trash.svg" alt="删除">
                            </button>
                        </div>
                    </div>
                    <div class="resume-info">
                        <h3 class="resume-title">人力资源专员简历</h3>
                        <div class="resume-meta">
                            <span class="resume-date">更新于 2025-03-18</span>
                            <span class="resume-status complete">已完成</span>
                        </div>
                        <div class="resume-stats">
                            <div class="stat-item">
                                <img src="images/icon-eye.svg" alt="浏览">
                                <span>19 次浏览</span>
                            </div>
                            <div class="stat-item">
                                <img src="images/icon-download-small.svg" alt="下载">
                                <span>3 次下载</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pagination">
                <button class="pagination-btn" disabled>
                    <img src="images/icon-chevron-left.svg" alt="上一页">
                </button>
                <button class="pagination-btn active">1</button>
                <button class="pagination-btn">2</button>
                <button class="pagination-btn">3</button>
                <span class="pagination-ellipsis">...</span>
                <button class="pagination-btn">8</button>
                <button class="pagination-btn">
                    <img src="images/icon-chevron-right.svg" alt="下一页">
                </button>
            </div>
        </main>
    </div>

    <div class="modal" id="create-resume-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>创建新简历</h2>
                <button class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="resume-name">简历名称</label>
                    <input type="text" id="resume-name" class="form-control" placeholder="例如：产品经理简历">
                </div>
                <div class="form-group">
                    <label>选择模板</label>
                    <div class="template-selection">
                        <div class="template-option active">
                            <img src="images/resume-preview-1.jpg" alt="模板预览">
                            <span class="template-name">专业简约</span>
                        </div>
                        <div class="template-option">
                            <img src="images/resume-preview-2.jpg" alt="模板预览">
                            <span class="template-name">现代创意</span>
                        </div>
                        <div class="template-option">
                            <img src="images/resume-preview-3.jpg" alt="模板预览">
                            <span class="template-name">经典商务</span>
                        </div>
                        <div class="template-option">
                            <img src="images/resume-preview-4.jpg" alt="模板预览">
                            <span class="template-name">时尚设计</span>
                            <span class="template-badge">高级</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>开始方式</label>
                    <div class="start-options">
                        <div class="start-option active">
                            <input type="radio" name="start-option" id="start-blank" checked>
                            <label for="start-blank">
                                <img src="images/icon-document.svg" alt="">
                                <span>从空白开始</span>
                            </label>
                        </div>
                        <div class="start-option">
                            <input type="radio" name="start-option" id="start-ai">
                            <label for="start-ai">
                                <img src="images/icon-ai.svg" alt="">
                                <span>AI生成简历</span>
                                <span class="option-badge">高级</span>
                            </label>
                        </div>
                        <div class="start-option">
                            <input type="radio" name="start-option" id="start-import">
                            <label for="start-import">
                                <img src="images/icon-upload.svg" alt="">
                                <span>导入已有简历</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" data-dismiss="modal">取消</button>
                <button class="btn btn-primary">创建简历</button>
            </div>
        </div>
    </div>

    <script src="js/main.js"></script>
    <script src="js/my-resumes.js"></script>
</body>
</html>